<template>
  <el-dialog
    title="收货信息"
    :visible.sync="editUserAddressDialogData.isShow"
    width="540px"
    top="35vh"
    append-to-body
    @open="handleDialogOpen"
    @close="handleDialogClose"
  >
    <el-form
      ref="ruleForm"
      :model="ruleForm"
      :rules="rules"
      label-width="80px"
    >
      <el-form-item label="收货人" prop="name">
        <el-input
          clearable
          placeholder="请输入收货人"
          v-model="ruleForm.name"
        ></el-input>
      </el-form-item>
      <el-form-item label="联系电话" prop="phone">
        <el-input
          clearable
          placeholder="请输入联系电话"
          v-model="ruleForm.phone"
        ></el-input>
      </el-form-item>
      <el-form-item label="编辑地址" prop="address">
        <select class="location location_p" name="location_p"></select>
        <select class="location location_c" name="location_c"></select>
        <select class="location location_a" name="location_a"></select>
      </el-form-item>
      <el-form-item label="详细地址" prop="detailedAddress">
        <el-input
          clearable
          placeholder="详细地址"
          v-model="ruleForm.detailedAddress"
          type="textarea"
        ></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="success" plain @click="editUserAddressDialogData.isShow = false">取 消</el-button>
      <el-button
        type="success"
        :loading="loading"
        @click="saveAddress"
        >确认</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
import { updateUserAddress } from '@/api/system/user'
import { PCAS } from '@/utils/region-select'

export default {
  props: ['editUserAddressDialogData'],
  data() {
    var valiAddressSelect = (rule, value, callback) => {
      if (
        !(
          document.getElementsByName('location_p')[0].value ||
          document.getElementsByName('location_c')[0].value ||
          document.getElementsByName('location_a')[0].value
        )
      ) {
        callback(new Error('请选择地区'))
      } else {
        callback()
      }
    }

    return {
      isPCAS: null,
      loading: false,
      address: [],
      ruleForm: {
        province: '',
        city: '',
        area: '',
        name: '',
        phone: '',
        detailedAddress: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入收货人名称', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '手机号必填', trigger: 'blur' },
          { pattern: /^1[3456789]\d{9}$/, message: '手机号码格式不正确', trigger: 'blur' }
        ],
        address: { required: true, validator: valiAddressSelect, trigger: 'change' },
        detailedAddress: { required: true, message: '请输入详细地址', trigger: 'blur' }
      }
    }
  },
  methods: {
    initRegionInfo(address) {
      if (this.validateEmpty(address)) {
        this.isPCAS = new PCAS(
          'location_p',
          'location_c',
          'location_a',
          '',
          '',
          ''
        )
      } else {
        // 分割字符串
        this.isPCAS = new PCAS(
          'location_p',
          'location_c',
          'location_a',
          address[0],
          address[1],
          address[2]
        )
      }
    },
    validateEmpty(val) {
      if (val instanceof Array) {
        if (val.length === 0) return true
      } else if (val instanceof Object) {
        if (JSON.stringify(val) === '{}') return true
      } else {
        if (
          val === 'null' ||
          val == null ||
          val === 'undefined' ||
          val === undefined ||
          val === ''
        )
          return true
        return false
      }
      return false
    },
    saveAddress() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          this.ruleForm.province = document.getElementsByName('location_p')[0].value
          this.ruleForm.city = document.getElementsByName('location_c')[0].value
          this.ruleForm.area = document.getElementsByName('location_a')[0].value
          this.loading = true
          updateUserAddress(
            this.editUserAddressDialogData.address.id,
            this.ruleForm,
            (res) => {
              this.loading = false
              this.editUserAddressDialogData.isShow = false
              this.$emit('update-address-successful')
              this.$message({
                message: '修改成功！',
                type: 'success'
              })
            },
            (res) => {
              this.loading = false
              this.$message({
                message: res.message,
                type: 'warning'
              })
            }

          )
        } else {
          return false
        }
      })
    },
    handleDialogOpen() {
      this.address = [
        this.editUserAddressDialogData.address.province,
        this.editUserAddressDialogData.address.city,
        this.editUserAddressDialogData.address.area
      ]
      this.ruleForm.detailedAddress = this.editUserAddressDialogData.address.detailedAddress
      this.ruleForm.name = this.editUserAddressDialogData.address.name
      this.ruleForm.phone = this.editUserAddressDialogData.address.phone
      this.$nextTick(() => {
        this.initRegionInfo(this.address)
      })
    },
    handleDialogClose() {
      this.$refs['ruleForm'].resetFields()
    }
  }
}
</script>

<style scoped lang="less">
.location {
  border: none;
  background: #f7f7f7;
  height: 36px;
  width: 100px;
  background: #f7f7f7;
  border-radius: 8px;
  padding: 6px 12px;
  margin-right: 16px;
}
</style>
